<template>
    <div>
        <div class="search">
            <input type="text" placeholder="输入城市名或拼音" class="search-input" v-model="keyword" />
        </div>
        <div class="search-content"  v-show="keyword" ref="search"> 

            <ul>
                <li v-for="item of list" :key="item.id" class="search-item" @click="handleClickCity(item.name)">{{item.name}}</li>
                <li class="search-item border-bottom" v-show="!list.length" >没找到匹配数据</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import BScroll from "better-scroll";
    export default {
        name: "CitySearch",
        props: {
            cities: Object
        },
        data() {
            return {
                keyword: '',
                list: [],
                timer: null
            }
        },
          methods: {
            handleClickCity(city) {
             //this.$store.dispatch('changeCity',city)
             this.$store.commit('changeCity',city)
              this.$router.push('/')
            }

        },
        mounted() {
            this.scroll = new BScroll(this.$refs.search);
        },
        watch: {
            keyword() {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list =[]
                    return 
                }
                this.timer = setTimeout(() => {
                    const result = []
                    for (let i in this.cities) {
                        this.cities[i].forEach((value) => {
                            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                                result.push(value)
                            }
                        });
                    }
                    this.list = result
                }, 100)
            }
        }
    };
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    .search
        height .72rem
        background $bgColor
        padding 0 .1rem 
        .search-input
            box-sizing border-box
            width 100%
            height .62rem
            line-height .62rem
            text-align left 
            border-radius 0.06rem
            color #666
            padding 0.1rem 

.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    background #eee
    .search-item
        line-height .62rem
        padding 0.2rem
        color #666
        text-align left 



</style>

